<template>
  <el-form class="refine_forget" ref="form" :model="form" label-width="80px">

    <div class="logo-row">
      <img src="../../assets/logo.gif" class="logo"/>
      <h1>船舶计划申报系统</h1>
    </div>
    <div class="container">
      <h2>密码重置</h2>

      <el-input style="margin-top:10px;" placeholder="输入用户名" v-model="form.user" @change="userChange">
        <template slot="prepend"><img class="icon" src="../../assets/login-user.png"/></template>
      </el-input>

      <el-input style="margin-top:10px;" placeholder="输入手机号" v-model="form.phone" @change="phoneChange">
        <template slot="prepend"><i class="el-icon-mobile-phone" style="font-size:18px;"/></template>
      </el-input>

      <el-input style="margin-top:10px;" placeholder="输入验证码" v-model="form.vercode">
        <template slot="prepend"><img class="icon" src="../../assets/login-msgcode.png"/></template>
        <span v-if="countdown > 0" slot="append">{{countdown}}秒后重发</span>
        <el-button v-else slot="append" :class="phonenter?'codebtn1':'codebtn'" @click="vercode">获取验证码</el-button>

      </el-input>

      <el-input style="margin-top:10px;" placeholder="输入新密码" v-model="form.newpwd" maxlength="12">
        <template slot="prepend"><img class="icon" src="../../assets/login-pwd.png"/></template>
      </el-input>
      <div class="input_span">
        <label style="color: #fff;">强度:</label>
        <span id="one"></span>
        <span id="two"></span>
        <span id="three"></span>
      </div>
<!--      <div id="font">-->
<!--        <span>弱</span>-->
<!--        <span>中</span>-->
<!--        <span>强</span>-->
<!--      </div>-->

      <el-input style="margin-top:10px;" placeholder="再次输入新密码" v-model="form.newpwd2" maxlength="12">
        <template slot="prepend"><img class="icon" src="../../assets/login-check.png"/></template>
      </el-input>

      <el-button style="margin-top:20px;width:350px;" type="primary" @click="onSubmit" class="surebtn">提 交</el-button>

    </div>

  </el-form>
</template>

<script>
  import * as sysUserService from '@/services/SysUserService'

  export default {
    data: function () {
      return {
        form: {
          phone: '',
          vercode: '',
          user: '',
          newpwd: '',
          newpwd2: ''
        },
        phonenter: false,
        countdown: 0,
        timer: 0,
          passwordSt: '空'
      };
    },
    methods: {
        checkStrong(sValue) {
            var modes = 0;
            var str = sValue
            if (sValue.indexOf(' ') >= 0) {
                str = sValue.substring(0, sValue.indexOf(' '));
                this.form.newpwd = str;
            }
            //正则表达式验证符合要求的
            if (str.length < 1) return modes;
            if (/\d/.test(str)) modes++; //数字
            if (/[a-z]/.test(str)) modes++; //小写
            if (/[A-Z]/.test(str)) modes++; //大写
            if (/\W/.test(str)) modes++; //特殊字符
            //逻辑处理
            if (sValue.length >= 8 && modes > 1) {
                modes++
            }
            return modes;
        },
      vercode() {
        sysUserService.getCaptcha(this.form.phone, this.form.user).then(res => {
          this.$alert('验证码已成功发送', '提示')
          this.countdown = 120
          this.timer = setInterval(() => {
            this.countdown--
            if (this.countdown <= 0) {
              clearInterval(this.timer)
            }
          }, 1000)
        })
      },
      phoneChange(val) {
        this.phonenter = (val.length === 11 && !!this.form.user)
      },
      userChange(val) {
        this.phonenter = (!!val && this.form.phone.length === 11)
      },
      onSubmit() {
        if (!this.form.user) {
          this.$alert('请输入用户名', '提示')
          return false
        }

        if (!this.form.phone || this.form.phone.length !== 11) {
          this.$alert('请正确输入手机号码', '提示')
          return false
        }

          if (this.form.vercode.length !== 4) {
              this.$alert('请正确输入验证码', '提示')
              return false
          }

          if (this.form.newpwd.length < 8) {
              this.$alert('密码长度不能少于8位', '提示')
              return false
          }

        if (!this.form.newpwd) {
          this.$alert('请输入新密码', '提示')
          return false
        }

        if (!this.form.newpwd2) {
          this.$alert('请再次输入新密码', '提示')
          return false
        }

        if (this.form.newpwd !== this.form.newpwd2) {
          this.$alert('两次输入的密码不一致', '提示')
          return false
        }
          if (this.passwordSt != '强') {
              this.$alert('密码必须包含大小写字母+数字+特殊字符', '提示')
              return false
          }

        sysUserService.forgotPassword(this.form).then(res => {
          this.$alert('密码已修改，请重新登录').then(() => {
            this.$router.push('/login');
          })
        })
      }
    },
      watch: {
          'form.newpwd' (newname, oldname) {
              this.msgText = this.checkStrong(newname);
              if (this.msgText > 1 || this.msgText == 1) {
                  document.getElementById('one').style.background = 'red';
                  this.passwordSt = '弱'
              } else {
                  document.getElementById('one').style.background = '#eee';
                  this.passwordSt = '空'
              }
              if (this.msgText > 4 || this.msgText == 4) {
                  document.getElementById('two').style.background = 'orange';
                  this.passwordSt = '一般'
              } else {
                  document.getElementById('two').style.background = '#eee';
                  this.passwordSt = '空'
              }
              if (this.msgText == 5) {
                  document.getElementById('three').style.background = '#00D1B2';
                  this.passwordSt = '强'
              } else {
                  document.getElementById('three').style.background = '#eee';
                  this.passwordSt = '空'
              }
          }
      }
  };
</script>

<style scoped lang="scss">
  .refine_forget {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: url(../../assets/login-bg.png) no-repeat;
    background-size: cover;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .logo-row {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;

      img {
        width: 94px;
        height: 94px;
      }

      h1 {
        margin-left: 10px;
        font-size: 34px;
        color: #64e9eb;
      }
    }

    .container {
      width: 350px;
      border-radius: 20px;
      border: solid 2px rgba(119, 187, 239, .1);
      margin-top: 30px;
      background-color: rgba(75, 57, 211, .1);
      padding: 40px;

      h2 {
        font-size: 20px;
        color: #fff;
      }

      .icon {
        width: 18px;
        height: 20px;
      }

      .codebtn {
        background-color: #e0e0e0;
        font-size: 14px;
        color: #a6a6a6;
      }
      .codebtn1 {
        background-color: #0062cd;
        font-size: 14px;
        color: white;
      }
    }
  }

  .input_span span {
    display: inline-block;
    width: 85px;
    height: 10px;
    background: #eee;
    line-height: 20px;
  }

  #one {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    border-right: 0px solid;
    margin-left: 20px;
    margin-right: 3px;
  }

  #two {
    border-left: 0px solid;
    border-right: 0px solid;
    margin-left: -5px;
    margin-right: 3px;
  }

  #three {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border-left: 0px solid;
    margin-left: -5px;
  }
  #font span:nth-child(1) {
    color: red;
    margin-left: 80px;
  }
  #font span:nth-child(2) {
    color: orange;
    margin: 0 60px;
  }
  #font span:nth-child(3) {
    color: #00d1b2;
  }
</style>
